<template>
  <div class="orderForm">
    <!-- 搜索栏 -->
    <search-input
      :search="searchValue"
      @transferSearch="getSearch"
    ></search-input>
    <!-- 标签页 -->
    <van-tabs
      v-model="activeName"
      @click="onClick"
      title-active-color="#1F0D44"
      title-inactive-color="#665E75"
    >
      <van-tab title="待发货" name="1">
        <orderItem
          v-for="item in allData"
          :key="item.id"
          :selectNum="1"
          :showItem="item.orderGoodsInfo"
        ></orderItem>
      </van-tab>

      <van-tab title="已发货" name="2">
        <!-- <orderItem :selectNum="2" :showItem="showItem"></orderItem> -->
        <orderItem
          v-for="item in allData"
          :key="item.id"
          :selectNum="2"
          :showItem="item.orderGoodsInfo"
        ></orderItem>
      </van-tab>
      <van-tab title="已完成" name="5">
        <orderItem
          v-for="item in allData"
          :key="item.id"
          :selectNum="5"
          :showItem="item.orderGoodsInfo"
        ></orderItem>
      </van-tab>
      <!-- <van-tab title="退换货">退换货</van-tab> -->
    </van-tabs>
  </div>
</template>

<script>
import SearchInput from '@/components/SearchInput'
import orderItem from './components/orderItem'
import { getAllOrder } from '@/api/pickOrder.js'
export default {
  components: { SearchInput, orderItem },
  data() {
    return {
      searchValue: '',
      //   selectNum: '待发货',
      status: '0',
      showProduct: '',
      show: false,
      allData: '',
      activeName: '1'
    }
  },
  created() {
    const status = this.$route.query.status
    if (status) {
      this.activeName = status
      return this.this.getAllOrder(status)
    }
    this.getAllOrder()
  },
  methods: {
    getSearch(val) {
      this.searchValue = val
      console.log(this.searchValue)
    },
    onClick(name, title) {
      //   this.selectName = title
      console.log(name, title)
      this.allData = ''
      this.getAllOrder(name)
    },
    // 获取所有的订单

    async getAllOrder(status) {
      this.showItem = ''
      const res = await getAllOrder(status, this.searchValue)
      //   console.log(res.data)
      if (JSON.stringify(res.data) == '[]') {
        return this.$toast('您还没有订单')
        console.log(this.allData)
      }
      console.log(res.data)
      this.allData = res.data.orderData //展示四条数据
      console.log(this.allData)
      //   展示图片   商品名称   价格  数量
      //   this.showProduct = res.data.orderData
      //   console.log(this.showProduct.headimgurl)
      //   this.headimgurl = this.showProduct.headimgurl
      //   console.log(this.headimgurl)
      //   console.log(this.showProduct) //要展示的数组

      //   展示图片   商品名称   价格  数量
      //   JSON.stringify(res.data) !== '[]'
      //   this.show = true
      //   const [{ orderGoodsInfo }] = res.data.orderData
      //   this.showItem = orderGoodsInfo
    }
  }
}
</script>

<style lang="less" scoped>
.orderForm {
  //   margin-top: 40px;
  background-color: #f7f6fb;
  .van-tabs {
    position: relative;
    top: 54px;
    ::v-deep {
      .van-tabs__wrap {
        height: 44px;
      }
      .van-tab--active {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1f0d44;
      }
      .van-tabs__line {
        width: 16px;
        height: 3px;
        background: linear-gradient(135deg, #ff5bf4 0%, #622ccc 100%);
        border-radius: 2px;
        position: absolute;
        top: 35px;
      }
      .van-tabs__content {
        background-color: #f7f6fb;
        padding: 12px;
      }
    }
  }
}
</style>
